
 <template>
  <div class="item-silder">
    <el-slider
      v-bind="$attrs"
      v-model="Val"
      @change="change ? change(Val) : none()"
    ></el-slider>
  </div>
</template>

<script>
export default {
  name: "Silder",
  data() {
    return {
      Val: "",
    };
  },
  props: {
    value: [Number, String],
    change: {
      type: Function,
      default: () => () => {},
    },
  },
  watch: {
    Val: function (newVal) {
      this.$emit("update:value", newVal);
    },
    value: {
      handler: function (val) {
        this.Val = Number(val);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    none() {
      return false;
    },
  },
};
</script>


<style scoped lang="less">
.item-silder {
  width: 150px;
}
</style>
